<template>
  <div class=" kind">
    <header class="kind-search">
      <van-search
        placeholder="请输入搜索关键词"
        input-align="center"
        :disabled="true"
        @click="$router.push('/search')"
      />
    </header>
    <div class="kind-content">
      <div class="kind-left">
        <van-sidebar v-model="activeKey" @change="onChange">
          <van-sidebar-item :title="item" v-for="item in kindList" :key="item" />
        </van-sidebar>
      </div>
      <div class="kind-right">
        <van-swipe :autoplay="3000">
          <van-swipe-item v-for="(image, index) in images" :key="index">
            <img v-lazy="image"
            width="290px" height="150px"/>
          </van-swipe-item>
        </van-swipe>
        <van-grid :gutter="10"  :column-num="3">
          <van-grid-item v-for="item in brandList" :key="item.brandId" :icon="item.logo" :text="item.brand" @click="onSearch(item.brand)"/>
        </van-grid>
      </div>
    </div>
  </div>
</template>
<script>
import { getKind, getBrand } from '@/api/request.js'
import Vue from 'vue'
import { Search, Sidebar, SidebarItem, Lazyload, Grid, GridItem, Image as VanImage } from 'vant'
Vue.use(Search)
Vue.use(Sidebar)
Vue.use(SidebarItem)
Vue.use(Lazyload)
Vue.use(Grid)
Vue.use(GridItem)
Vue.use(VanImage)
export default {
  data () {
    return {
      kindList: [],
      brandList: [],
      activeKey: 0,
      images: [
        'https://img02.hua.com/slider/xianhuan_01_20210106.jpg',
        'https://img02.hua.com/slider/xianhua03_20190213.jpg'
      ]
    }
  },
  mounted () {
    getKind().then(data => {
      this.kindList = data.data.msg
      getBrand({
        kindKey: this.kindList[this.activeKey]
      }).then(data => {
        this.brandList = data.data.msg
      })
    })
  },
  methods: {
    onChange (v) {
      getBrand({
        kindKey: this.kindList[v]
      }).then(data => {
        this.brandList = data.data.msg
      })
    },
    onSearch (b) {
      this.$router.push('/searchRes/' + b + '/brand')
    }
  }
}
</script>
<style scoped lang="scss">
.kind {
  background: #efefef;
  overflow: hidden;
  height: 100%;
  header{
    position: relative;
    z-index: 900;
    background: #efefef;
    width: 100vw;
    height: 0.46rem;
  }
  .kind-content{
    width: 100vw;
    height: 100%;
    display: flex;
    overflow: auto;
    .kind-left{
      width: 0.8rem;
      overflow-y: auto;
      .van-sidebar-item--select{
        color: red;
      }
    }
    .kind-right{
     flex: 1;
     background: #fff;
     overflow-y: auto;
     .van-grid-item__content--surround::after{
      border-radius: 50%
      }
      .van-grid{
        margin: 0.15rem 0;
      }
    }
    .van-cell {
    border-bottom: 0;
  }
  }
}
</style>
